<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>
<script  src="/~junwang/home/js/lib/requirejs/require.2.1.8.js"></script>
  <script  src="/~junwang/home/js/lib/requirejs/require.conf.js"></script>
   <link href="/~junwang/css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
 <link href="/~junwang/home/js/projects/avatar/avatar.css" rel="stylesheet" type="text/css" />

<!--<script>-->
  <!--requirejs.config({-->
    <!--'baseUrl': '/',-->
    <!--'paths': {-->
      <!--'base': 'resources/base/js',-->
      <!--'aarpmedcare': '/partner/shra/js',-->
      <!--"lib": "resources/base/js/lib",-->
      <!--"jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min",-->
      <!--"jquery-ui": "//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min"-->
    <!--},-->
    <!--'map': {-->
      <!--'*': {-->
        <!--"underscore": "lib/underscore",-->
        <!--"backbone": "lib/backbone",-->
        <!--"require.dust": "lib/requirejs/dust.dev",-->
        <!--"require.text": "lib/requirejs/text"-->
      <!--}-->
    <!--},-->
    <!--"shim": {-->
      <!--"jquery": {-->
        <!--"exports": "jQuery"-->
      <!--},-->
      <!--"jquery-ui": ["jquery"]-->
    <!--}-->
  <!--});-->
<!--</script>-->
</head>
<body id="hra">
<select id="gender">
  <option value="female">female</option>
  <option value="male">male</option>
</select>
<input type="button" value="submit"/>

<div class="hra-avatar-builder">
  <!-- Use jquery ui tabs for the customization selection interface -->
  <div class="hra-avatar-builder-tabs hra-avatar-builder-tabs-male">
    <ul>
      <div class="nav-left"></div><div class="nav-right"></div>
      <li><a href="#hra-avatar-avatar-skin" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-skintone"></div></div>Skin Tone</a></li>
      <li><a href="#hra-avatar-avatar-hair" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-hairestyle"></div></div>Hairstyle</a></li>
      <li><a href="#hra-avatar-avatar-facial-hair" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-facialhair"></div></div>Facial Hair</a></li>
      <li><a href="#hra-avatar-avatar-top" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-top"></div></div>Top</a></li>
      <li><a href="#hra-avatar-avatar-bottom" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-bottom"></div></div>Bottom</a></li>
      <li><a href="#hra-avatar-avatar-glasses" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-glasses"></div></div>Glasses</a></li>
      <li class="half-hidden"><a href="#hra-avatar-avatar-shoes" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-shoes"></div></div>Shoes</a></li>
      <li><a href="#hra-avatar-avatar-hats" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-hats"></div></div>Hats</a></li>
      <li><a href="#hra-avatar-avatar-accessories" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-accessories"></div></div>Accessories</a></li>
    </ul>
    <div id="hra-avatar-avatar-skin">
      <ul class="threerows" data-attr="avatarSkin">
        <h2>Choose a Skin Tone</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="DarkBrown" title="DarkBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Fair" title="Fair"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Golden" title="Golden"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pale" title="Pale"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="RedBrown" title="RedBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-hair">
      <ul class="onerow" data-attr="avatarHairColor">
        <h2>Choose a Hair Color</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blonde" title="Blonde"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="DarkBrown" title="DarkBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="White" title="White"></a></div></li>
      </ul>
      <ul class="tworows" data-attr="avatarHairStyle">
        <h2>Choose a Hairstyle</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BoyCut" title="BoyCut"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Buzz" title="Buzz"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="SideHair" title="SideHair"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Long" title="Long"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="ElvisHair" title="ElvisHair"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Bald" title="Bald"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-facial-hair">
      <ul class="onerow" data-attr="avatarFacialHairColor">
        <h2>Choose a Facial Hair Color</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blonde" title="Blonde"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="DarkBrown" title="DarkBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="White" title="White"></a></div></li>
      </ul>
      <ul class="tworows" data-attr="avatarFacialHairStyle">
        <h2>Choose a Facial Hair Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Mustache"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Beard"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="SideBurns"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="FullFacial"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="NoFacial"></a></div></li>

      </ul>
    </div>
    <div id="hra-avatar-avatar-top">
      <ul class="threerows" data-attr="avatarTopColor">

      </ul>
      <ul class="threerows" data-attr="avatarTopStyle">
        <h2>Choose a Top Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Tshirt" title="Tshirt"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Polo" title="Polo"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LongSleeve" title="LongSleeve"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Sweater" title="Sweater"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Vest" title="Vest"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-bottom">
      <ul class="threerows" data-attr="avatarBottomColor">
      </ul>
      <ul class="threerows" data-attr="avatarBottomStyle">
        <h2>Choose a Bottom Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Overalls" title="Overalls"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Shorts" title="Shorts"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="AthleticPants" title="AthleticPants"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pants" title="Pants"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="StripeShorts" title="StripeShorts"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-glasses">
      <ul class="threerows" data-attr="avatarGlassesColor">
      </ul>
      <ul class="threerows" data-attr="avatarGlassesStyle">
        <h2>Choose a Glasses Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="RayBan" title="RayBan"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Reader" title="Reader"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Star" title="Star"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Aviator" title="Aviator"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Wireframe" title="Wireframe"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Sunglasses" title="Sunglasses"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="none" title="none"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-hats">
      <ul class="threerows" data-attr="avatarHatsColor">
      </ul>
      <ul class="threerows" data-attr="avatarHatsStyle">
        <h2>Choose a Hats Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="TopHat" title="TopHat"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BallCap" title="BallCap"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Bowler" title="Bowler"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Cowboy" title="Cowboy"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Fedora" title="Fedora"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="StockingCap" title="StockingCap"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="none" title="none"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-accessories">
      <ul class="threerows" data-attr="avatarAccessoriesColor">
      </ul>
      <ul class="threerows" data-attr="avatarAccessoriesStyle">
        <h2>Choose a Accessories Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BowTie" title="BowTie"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Tie" title="Tie"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="PocketSquare" title="PocketSquare"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Boutineer" title="Boutineer"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Bolo" title="Bolo"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Belt" title="Belt"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Camera" title="Camera"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="none" title="none"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-shoes">
      <ul class="threerows" data-attr="avatarShoesColor">
      </ul>
      <ul class="threerows" data-attr="avatarShoesStyle">
        <h2>Choose a Shoes Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Tennis" title="Tennis"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="DressShoes" title="DressShoes"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Sandals" title="Sandals"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Cowboy" title="Cowboy"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Slippers" title="Slippers"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="none" title="none"></a></div></li>
      </ul>
    </div>
  </div>



  <div class="hra-avatar-builder-tabs hra-avatar-builder-tabs-female">
    <ul>
      <div class="nav-left"></div><div class="nav-right"></div>
      <li><a href="#hra-avatar-avatar-skin" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-skintone"></div></div>Skin Tone</a></li>
      <li><a href="#hra-avatar-avatar-hair" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-hairstyle"></div></div>Hairstyle</a></li>
      <li><a href="#hra-avatar-avatar-top" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-top"></div></div>Top</a></li>
      <li><a href="#hra-avatar-avatar-bottom" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-bottom"></div></div>Bottom</a></li>
      <li><a href="#hra-avatar-avatar-glasses" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-glasses"></div></div>Glasses</a></li>
      <li><a href="#hra-avatar-avatar-shoes" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-shoes"></div></div>Shoes</a></li>
      <li class="half-hidden"><a href="#hra-avatar-avatar-hats" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-hats"></div></div>Hats</a></li>
      <li><a href="#hra-avatar-avatar-jewelry" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-jewelry"></div></div>Jewelry</a></li>
      <li><a href="#hra-avatar-avatar-accessories" class="ui-tabs-anchor"><div class="img-wrap"><div class="img-accessories"></div></div>Accessories</a></li>
    </ul>
    <div id="hra-avatar-avatar-skin">
      <ul class="threerows" data-attr="avatarSkin">
        <h2>Choose a Skin Tone</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Brown" title="Brown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="DarkBrown" title="DarkBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Fair" title="Fair"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Golden" title="Golden"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Pale" title="Pale"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="RedBrown" title="RedBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Yellow" title="Yellow"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-hair">
      <ul class="onerow" data-attr="avatarHairColor">
        <h2>Choose a Hair Color</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Black" title="Black"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blonde" title="Blonde"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="DarkBrown" title="DarkBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Grey" title="Grey"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LightBrown" title="LightBrown"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Red" title="Red"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="White" title="White"></a></div></li>
      </ul>
      <ul class="tworows" data-attr="avatarHairStyle">
        <h2>Choose a Hairstyle</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Bob" title="Bob"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Long" title="Long"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="LongCurly" title="LongCurly"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Short" title="Short"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="ShortCurly" title="ShortCurly"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-top">
      <ul class="threerows" data-attr="avatarTopColor">
      </ul>
      <ul class="threerows" data-attr="avatarTopStyle">
        <h2>Choose a Top Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Blouse" title="Blouse"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Dress" title="Dress"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Sweater" title="Sweater"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Tshirt" title="Tshirt"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="TwinSet" title="TwinSet"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-bottom">
      <ul class="threerows" data-attr="avatarBottomColor">
      </ul>
      <ul class="threerows" data-attr="avatarBottomStyle">
        <h2>Choose a Bottom Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="DressPants" title="DressPants"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="SkinnyJeans" title="SkinnyJeans"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Skirt" title="Skirt"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-glasses">
      <ul class="threerows" data-attr="avatarGlassesColor">
      </ul>
      <ul class="threerows" data-attr="avatarGlassesStyle">
        <h2>Choose a Glasses Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="CatEye" title="CatEye"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Oversized" title="Oversized"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="RayBan" title="RayBan"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Reader" title="Reader"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Wireframe" title="Wireframe"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Sunglasses" title="Sunglasses"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="none" title="none"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-hats">
      <ul class="threerows" data-attr="avatarHatsColor">
      </ul>
      <ul class="threerows" data-attr="avatarHatsStyle">
        <h2>Choose a Hats Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="BallCap" title="BallCap"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="PageBoy" title="PageBoy"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="CowBoy" title="CowBoy"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Beret" title="Beret"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Kentucky" title="Kentucky"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Stocking" title="Stocking"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Visor" title="Visor"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="HeadDress" title="HeadDress"></a></div></li>
        <li><a href="#" class="next"></a></li>
        <li><a href="#" class="prev"></a></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Bow" title="Bow"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="HeadBand" title="HeadBand"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="none" title="none"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-jewelry">
      <ul class="threerows" data-attr="avatarJewelryColor">
      </ul>
      <ul class="threerows" data-attr="avatarJewelryStyle">
        <h2>Choose a Jewelry Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Necklace" title="Necklace"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Locket" title="Locket"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Jade" title="Jade"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Earrings" title="Earrings"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Studs" title="Studs"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Broach" title="Broach"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="none" title="none"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-accessories">
      <ul class="threerows" data-attr="avatarAccessoriesColor">
      </ul>
      <ul class="threerows" data-attr="avatarAccessoriesStyle">
        <h2>Choose a Accessories Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Purse" title="Purse"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Scarf" title="Scarf"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Camera" title="Camera"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="none" title="none"></a></div></li>
      </ul>
    </div>
    <div id="hra-avatar-avatar-shoes">
      <ul class="threerows" data-attr="avatarShoesColor">
      </ul>
      <ul class="threerows" data-attr="avatarShoesStyle">
        <h2>Choose a Shoes Style</h2>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Heals" title="Heals"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Cowboy" title="Cowboy"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Boots" title="Boots"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Sandals" title="Sandals"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="Slippers" title="Slippers"></a></div></li>
        <li><div class="hra-avatar-item-wrapper"><a href="#" data-val="none" title="none"></a></div></li>
      </ul>
    </div>
  </div>




  <!-- Preview of the avatar -->
  <div class="hra-avatar-builder-preview">
   <div class="gender"></div>
  </div>


</div>
Scale:<input type="text" id="hra-scale-value" value="0.5"/>
<input type="button" id="hra-create-scale" style="width:100px;height:30px;background-color:yellow;cursor:pointer;" value="create"/>
<div class="hra-avatar-scale" style="position:relative;height:0;width:0;">
</div>
<div class="hra-avatar-small" style="position:relative;">
</div>

<script>

  require(['/~junwang/home/js/projects/avatar/hra-avatar-builder.js'], function( avatar ) {
    avatar.initialize('male',3);
//    avatar.initialize('female',3);
  });
</script>

</body>
</html>